<template>
  <div class="topbar">
    <!--路由导航-->
    <div class="top">
      <div class="nav">
        <ul class="nav-centent">
          <li v-for="item in items" @mouseover="selectStyle (item)" @mouseout="outStyle(item)">
            <a :class="item.id" @click="goToPath(item.routerPath)">{{item.name}}</a>
            <ul v-show="item.isSubShow">
              <li v-for="subItems in item.subItems">
                <a  style="font-size: 16px" @click="goToPath(subItems.routerPath)">{{subItems.name}}</a>
              </li>

            </ul>
          </li>
                   <li v-if="type">
                <a @click.stop="outlogin">退出登录</a>
              </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { getCMSUrl1,getKey } from "@/utils/tools.js";
import router from "@/router/index.js"

export default {
  data() {
    return {
      type:'',
      LogoPic: require("../../../public/logo.png"),
      //  参数1
      params: {
        picCode: "BGPIC",
      },
      //轮播列表
      imgList: [],
      PICsPACE: localStorage.getItem("picSpace"),

      nowIndex:
          0,
      items: [
          {
            name: '首页',
            routerPath:'home',
            isSubShow: false,
            subItems: []
          },
        {
          name: '实验室简介',
          // routerPath: 'labInfo',
          isSubShow: false,
          subItems: [
            {
              name: '实验室概况',
              // routerPath: '/labInfo/jianjie'
            },
            {
              name: '实验室资质',
              // routerPath:'/labInfo/jigou'
            },
            {
              name: '重点实验室',
              routerPath:''
            },
            {
              name: '实体实验室',
              routerPath:''
            },

            ]
        },
        {
          name: '科学研究',
          routerPath: 'kexueyanjiu',
          isSubShow: false,
          subItems: [
            {
              name: '专家队伍',
              routerPath: '/kexueyanjiu/zhuanjia'
            },
            {
              name: '特色技术',
              routerPath:''
            },
            {
              name: '科研成果',
              routerPath:''
            },

            ]
        },
        {
          name: '仪器设备',
          isSubShow: false,
          routerPath: '/device',
          subItems: [
              {
                name: '设备能力',
                routerPath: '/device/deviceList'
              },
              {
                name: '设备预约',
                routerPath: '/device/deviceform'
              }
          ]
        },

        {
          name: '实验服务',
          // routerPath:'home',
          isSubShow: false,
          subItems: [
            {
              name: '检测项目',
              routerPath:''
            },
          ]
        },
        {
          name: '开放合作',
          routerPath: '',
          isSubShow: false,
          subItems: [
            {
              name: '对内合作'
            },
            {
              name: '对外分析测试',
              routerPath:''
            },
            {
              name: '对外实验交流',
              routerPath:''
            },
            ]
        }
        ,
        {
          name:'综合查询',
          routerPath: '',
          isSubShow: false,
          subItems: [
            {
              name: '数据仪表盘'
            },
            {
              name: '实验数据查询'
            },
            {
              name: '实验报告查询'
            },
            {
              name: '图像综合查询'
            },
            {
              name: '图版应用'
            }

          ]
        }

      ]
    };
  },

  methods: {
    outlogin(){
window.localStorage.clear()
location.reload()
    },
    // 数据大屏
    goScreen() {
      let token = sessionStorage.getItem("Login_token");

      if(token){
        window.open(`${getCMSUrl1()}?token=${token}`, "_blank");
      }else{
        window.open('http://uat.nlxdt.com:19002')
      }

    },

    OpenLogo() {
      document.getElementsByTagName("body")[0].className = "loaded";
    },
    GoHome() {
      this.$router.push({
        name: "home",
      });
    },
    //首页背景图获取
    get() {
      // this.Api.getbanner(this.params).then((res) => {
      //   if (res.code == 0) {
      //     // console.log(res,1111)
      //     this.imgList = res.data;
      //     // console.log(this.imgList);
      //   }
      // });
    },
    selectStyle: function(item) {
      item.isSubShow = true
    },
    outStyle(item) {
      item.isSubShow = false
    },
    goToPath(routerPath){
      if(routerPath){
        this.$router.push(routerPath);
      }else{

         this.$message('模块正在开发中，敬请期待!');
      }
    }
  },
  computed: {
    baseUrl() {
      return this.$store.state.fileIp;
    },
  },
  created() {
    this.get();
    this.type = getKey('token')
    // console.log(this.baseUrl,"图PIN路径")
    // this.Api.getIp().then((res) => {
    //   // console.log(res,"1111")
    //   sessionStorage.setItem("picSpace", res.data);
    //   // let a  = sessionStorage.getItem("picSpace");

    //   // console.log(this.PICsPACE,"你好")
    // });
  },
};
</script>

<style lang="less" scoped>
.BackgroundPic {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%);
}

//banner图的修改
.img-banner {
  // width: 100%;
  // height: 100%;
  object-fit: cover;
}

/deep/ .router-link-active {
  display: block;
  width: 150px;
  background: #7fb80e !important;
}

.topbar {
  width: 100%;
  height: 150px;
  background: url(../../assets/image/topbanner.png);
  display: flex;
  align-items: flex-end;
  position: relative;
}

a {
  display: inline-block;
  color: white;
  width: 100%;
}

/*.router-link-active{
  background-color: #dd2126;
}*/
.item {
  width: 150px;
  font-size: 20px;
  /*padding: 0 20px;*/
  /*background:rgba(0,0,0,0.7);*/
  cursor: pointer;
  text-align: center;
  line-height: 50px;
  color: white;
}
.item11 {
  width: 5px;
  font-size: 20px;
  /*padding: 0 20px;*/
  /*background:rgba(0,0,0,0.7);*/
  text-align: center;
  line-height: 50px;
  color: white;
}

.item:hover {
  background-color: #bed742;
}

.top {
  width: 1200px;
  display: flex;
  margin: 0 auto;
  background: #2a5caa;
  z-index: 1000;
}

.biaoti {
  width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
}

.biaoti-top {
  position: absolute;
  top: 0;
  width: 100%;
  background: rgba(242, 242, 242, 0.7) !important;
  border-radius: 3px;
  z-index: 1000;
}

.a,
.b {
  height: 20px;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  line-height: 20px;
  padding: 8px 0;
  cursor: pointer;
}

.b a {
  height: 20px;
  font-size: 14px;
  color: rgba(102, 102, 102, 1);
  line-height: 20px;
  padding: 0px 0;
  cursor: pointer;
}

.b a:hover {
  color: red;
}

.a:hover {
  color: red;
}

.background-color {
  height: 457px;
}

.nav{width:100%;height: 50px;background: #2a5caa;}
.nav .nav-centent{width: 1200px;margin:0 auto;height: 50px;}
.nav .nav-centent > li{width: 140px;height: 50px;display: block;float: left;text-align: center;margin-right: 10px;position: relative;cursor: pointer;}
.nav .nav-centent li a{width: 140px;height: 50px;display: block;font-size: 18px;line-height: 50px;color: #fff;}
.nav .nav-centent ul{position: absolute;left: 0;top: 50px;z-index: 99;width: 100%;}
.nav .nav-centent ul li{width: 140px;height: 50px;display: block;float: left;text-align: center;margin-right: 10px;line-height: 50px;background: #2a5caa;}
.nav .nav-centent ul li a:hover{background: #fff;color:#2a5caa; }
.nav .nav-centent li a:hover{background: #fff;color:#2a5caa; }
.nav .nav-centent li a.on{background: #fff;color:#2a5caa; }
</style>
